<template>
  <div class="border">
    <h1>A 结点</h1>
    <button @click="getEH3Ref">获取E h3 Ref</button>
    <div style="display: flex">
      <ChildrenB style="flex: 1" />
      <ChildrenC style="flex: 1" />
      <ChildrenD style="flex: 1" />
    </div>
  </div>
</template>
<script>
import ChildrenB from './child_b.vue'
import ChildrenC from '../childs_C'
import ChildrenD from '../childs_D'
export default {
  name: 'childA',
  components: {
    ChildrenB,
    ChildrenC,
    ChildrenD
  },
  // 使用provide在根组件提供api
  provide() {
    return {
      // 这个api设定主动通知 将组件实例绑定在根组件上
      setChildrenRef: (name, ref) => {
        this[name] = ref
      },
      // 这个api是主动获取绑定的组件
      getChildrenRef: (name) => {
        return this[name]
      },
      // 这个是获取根组件
      getRef: () => {
        return this
      }
    }
  },
  data() {
    return {
      color: 'blue'
    }
  },
  methods: {
    getEH3Ref() {
      console.log(this.childrenH)
    }
  }
}
</script>
<style lang=""></style>
